<template>
	<view class="cart-container" v-if="cart.length !== 0">
		<!-- 地址区域 -->
		<my-address></my-address>
		<!-- 标题区域 -->
		<view class="cart-title">
			<uni-icons type="cart-filled" size="20"></uni-icons>
			<text>购物车</text>
		</view>
		<!-- 商品列表 -->
		<uni-swipe-action>
			<block v-for="(item, index) in cart" :key="index">
				<uni-swipe-action-item :right-options="options" @click="bindClick(item.goods_id)">
					<!-- 商品组件 -->
					<my-goods :goods="item" :show-radio="true" :show-num="true" @change-radio="changeRadio" @change-num="changeNum"></my-goods>
				</uni-swipe-action-item>
			</block>
		</uni-swipe-action>
		<!-- 结算区域 -->
		<my-settle></my-settle>
	</view>
	<!-- 空容器区域 -->
	<view class="empty-container" v-else>
		<uni-icons type="cart" size="100"></uni-icons>
		<text>空空如也</text>
	</view>
</template>

<script>
// 导入组件
import myGoods from '@/components/common/my-goods.vue';
import myAddress from '@/components/common/my-address.vue';
import mySettle from '@/components/common/my-settle.vue';
import badgeMix from '@/mixins/tabbar-badge.js';
import { mapState, mapMutations } from 'vuex';
export default {
	mixins: [badgeMix],
	// 注册组件
	components: { myGoods, myAddress, mySettle },
	data() {
		return {
			options: [
				{
					text: '删除',
					style: {
						backgroundColor: '#d81e06'
					}
				}
			]
		};
	},
	methods: {
		// 映射
		...mapMutations('m_cart', ['updateCartState', 'updateCartCount', 'delCartById']),
		// 切换单选按钮
		changeRadio(e) {
			this.updateCartState(e);
		},
		// 切换数量
		changeNum(e) {
			this.updateCartCount(e);
		},
		// 点击选项按钮时触发事件
		bindClick(goods_id) {
			this.delCartById(goods_id);
		}
	},
	computed: {
		...mapState('m_cart', ['cart'])
	}
};
</script>

<style lang="scss">
// 最外层容器
.cart-container {
	padding-bottom: 50px;
}
// 标题区域
.cart-title {
	height: 40px;
	border-bottom: 5px solid #efefef;
	display: flex;
	align-items: center;
	text {
		font-size: 15px;
		margin-left: 5px;
	}
}

// 空容器
.empty-container {
	border: 1px solid red;
	height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text {
		font-size: 13px;
		color: gray;
	}
}
</style>
